<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>XXX</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
  <link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style type="text/css"> 
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);
}
</style>
<body>

<form id="myform">
 <div class="demoTable" style="margin-top: 15px;margin-left: 20px;">
AutoID：
  <div class="layui-inline">
    <input class="layui-input"  name="AutoID"  id="AutoID" autocomplete="off">
  </div>
CtrlType：
  <div class="layui-inline">
    <input class="layui-input"  name="CtrlType"  id="CtrlType" autocomplete="off">
  </div>
DoorCount：
  <div class="layui-inline">
    <input class="layui-input"  name="DoorCount"  id="DoorCount" autocomplete="off">
  </div>
InputPointCount：
  <div class="layui-inline">
    <input class="layui-input"  name="InputPointCount"  id="InputPointCount" autocomplete="off">
  </div>
OutputPointCount：
  <div class="layui-inline">
    <input class="layui-input"  name="OutputPointCount"  id="OutputPointCount" autocomplete="off">
  </div>
  <a class="layui-btn" data-type="reload">搜索</a>
</div> 
</form>   
 <table class="layui-hide"  id="demo"></table>
<table class="layui-hide"  id="test"  lay-filter="test"></table>
           
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">增加</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">修改</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
	<button class="layui-btn layui-btn-sm" lay-event="save">保存</button>
  </div>
</script>
<script>
//表格事件
layui.use('table', function(){
  var table = layui.table;
  var layTableId="test";
  var flag=0; //判断表格是否在增加数据
//返回data数据给表格
 var laydata="";
 function getdata(parm){
	 $.ajax({
			type:"POST",
			data:parm,
			async:false,  //默认true,异步
			url:"${bathPath}/aDKCtrlParams/selectAll.action",
			success:function(data){
					laydata=data;
		    }
		});  
	 return laydata;
 }

//console.log(laydata);
 //搜索事件
  function selectall()
  {
	  var parm = $('#myform').serialize(); //获取表单所有数据
	  alert(parm);
	 // alert(demoReload);
  	//这里以搜索为例
  	table.reload('test',{
  		data:getdata(parm),  //返回查询后的data直接赋值
  	    page: {
  	    curr: 1 //重新从第 1 页开始
  	  }
  	});
  	}
  //监听头工具栏事件
  	table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    //var length = table.cache[layTableId].length;   
    switch(obj.event){
      case 'add':   //增加一行
      if(flag==0){ 
      flag=1;
      // alert(flag);
		 var dataBak = [];   //定义一个空数组,用来存储之前编辑过的数据已经存放新数据
    	  var tableBak = table.cache[layTableId]; //获取之前的数据
    	  dataBak.push({   
    	      "lessonName": "请输入课程名称"
    	      ,"memo": "请输入课程描述"
    	  });
    	  for (var i = 0; i < tableBak.length; i++) {
    	      dataBak.push(tableBak[i]);      //将之前的数组备份
    	  } 
    	  table.reload("test",{
    	      data:dataBak  // 将新数据重新载入表格.
    	  })
      }
      else
    	  {
    	  layer.msg('只能同时增加一个，请先保存！');
    	  }
      break;
      case 'update':   //修改一行
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          /* layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
          layer.alert('编辑 [lessonName]：'+ checkStatus.data[0].lessonName); 
        	layer.alert(JSON.stringify(data), */
        			 $.ajax({
        					type:"POST",
        					async:true,  //默认true,异步
        					url:"${bathPath}/aDKCtrlParams/options.action",
        					data:"op=upd&data="+JSON.stringify(data),
        					success:function(data){
        						if(data!="SUCCESS"){
        							layer.msg(data);
        							selectall();
        						}
        				    }
        				}); 
        	    }
      break;
      case 'delete':   //删除一行
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
        	//alert(data);
        	layer.confirm("确定删除么？", {btn: ['确定', '取消'], title: "提示"}, function(){
			 $.ajax({
				type:"POST",
				async:true,  //默认true,异步
				url:"${bathPath}/aDKCtrlParams/options.action",  //后台增删改查的action
				data:"op=del&data="+JSON.stringify(data), //选中的数据信息
				success:function(data){
					if(data!="SUCCESS"){
						layer.msg(data);
						selectall();
					}
			    }
			}); 
        	});
        }
      break;
  case 'save':   //保存一行
	  		if(flag==1)
	  		{
	  		flag=0;
	  		//alert(flag);
 			 var oldData = table.cache[layTableId];  	
 			var datas="["+JSON.stringify(oldData[0])+"]";//取表格数据中新增的第一行数据
 			console.log(datas);
			$.ajax({
				type:"POST",
				async:false,  //默认true,异步
				url:"${bathPath}/aDKCtrlParams/options.action",
				data:"op=add&data="+datas,
				success:function(data){
						layer.msg("增加成功");
						selectall();
			    }
			}); 
	  		}
	  		else
	  			{
	  			layer.msg("无新增数据！");
	  			}
    break;
  };
  });
//监听排序
  table.on('sort(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  console.log(obj.field); //当前排序的字段名
  console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); //当前排序的 th 对象
  parm="sort="+obj.field+"&order="+ obj.type;
  alert(parm);
  table.reload('test', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
    ,data:getdata(parm)
  });
}); 
//文本框搜索
		  $('.demoTable .layui-btn').on('click', function(){
		   /*  var type = $(this).data('type');
		    active[type] ? active[type].call(this) : ''; */
		    selectall();
		  });
  //渲染表格
 table.render({
	    elem: '#test'
	    ,id: layTableId
	   //,url:'${bathPath}/aDKCtrlParams/selectAll.action'
	 	,data:getdata()
	    ,toolbar: '#toolbarDemo' 
	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
	    ,cols: [[
	    	{type: 'checkbox', fixed: 'left',align:'center',width:'5%'}
			,{type: 'numbers',title:'序号', fixed: 'left',align:'center',sort:true,width:'5%'}
	      	,{field: 'AutoID',title:'AutoID', fixed: 'left',align:'center',sort:true,width:'20%',edit: 'text'}
	      	,{field: 'CtrlType',title:'CtrlType', fixed: 'left',align:'center',sort:true,width:'20%',edit: 'text'}
	      	,{field: 'DoorCount',title:'DoorCount', fixed: 'left',align:'center',sort:true,width:'20%',edit: 'text'}
	      	,{field: 'InputPointCount',title:'InputPointCount', fixed: 'left',align:'center',sort:true,width:'20%',edit: 'text'}
	      	,{field: 'OutputPointCount',title:'OutputPointCount', fixed: 'left',align:'center',sort:true,width:'20%',edit: 'text'}
	    ]]
	    ,page: true //开启分页
	    ,limit:10   //默认十条数据一页
        ,limits:[10,20,30,40,100]  //数据分页条
	  }); 
});
</script>

</body>
</html>